<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="theader"></div>
    <div class="tbody">
      <h3>阳光100一室带厨卫</h3>
      <div class="deca"><span class="sub"> 近地铁</span></div>
      <div class="price">
        <div class="left">
          <div>1400 <span>/月</span></div>
          <div class="txt">租金</div>
        </div>
        <div class="middle">
          <div>1400 <span>/月</span></div>
          <div class="txt">租金</div>
        </div>
        <div class="right">
          <div>1400 <span>/月</span></div>
          <div class="txt">租金</div>
        </div>
      </div>
      <div class="erath">
        <div class="e_left">
          <div><span>装修：</span>精装</div>
          <div><span>楼层：</span>高楼层</div>
        </div>
        <div class="e_right">
          <div><span>朝向：</span>南</div>
          <div><span>类型：</span>普通住宅</div>
        </div>
      </div>
    </div>
    <div class="thigh">
      <div class="mname">小区： <span>天山星城</span></div>
      <div class="map"></div>
      <div class="match">房屋配套</div>
      <van-grid :column-num="5" :border="false">
        <van-grid-item icon="photo-o" text="衣柜" />
        <van-grid-item icon="photo-o" text="洗衣机" />
        <van-grid-item icon="photo-o" text="空调" />
        <van-grid-item icon="photo-o" text="天然气" />
        <van-grid-item icon="photo-o" text="冰箱" />
        <van-grid-item icon="photo-o" text="暖气" />
        <van-grid-item icon="photo-o" text="电视" />
        <van-grid-item icon="photo-o" text="热水器" />
        <van-grid-item icon="photo-o" text="宽带" />
        <van-grid-item icon="photo-o" text="沙发" />
      </van-grid>
    </div>
    <div class="calf">
      <div class="calf_top">房源概括</div>
    </div>
    <div class="tfooter">
      <div class="left" @click="collect" :class="{ active: flag }">收藏</div>
      <div class="midd">在线咨询</div>
      <div class="right">电话预约</div>
    </div>
  </div>
</template>

<script>
import {
  getHouseDetail,
  updateCollect,
  delCollect,
  getisCollect
} from '@/api/Homepage'

export default {
  name: 'fhdetail',
  data () {
    return {
      flag: false
    }
  },

  async created () {
    const id = this.$route.query.id

    // const id = '5cc4494549926d0e2b94c816'
    console.log(id)
    const { body } = await getHouseDetail(id)
    this.list = body
    console.log(this.list)
  },
  methods: {
    async collect () {
      const id = this.$route.query.id
      const { body } = await getisCollect(id)
      console.log(body)
      if (body.isFavorite) {
        const data = await delCollect(id)
        console.log(data)
      } else {
        await updateCollect(id)
        this.flag = !this.flag
        if (this.flag) {
          // this.$toast.success('收藏成功')
          console.log('收藏成功')
        }
      }
    }
    // async collect () {
    //   if (getisCollect(this.list.houseCode)) {
    //     if (this.flag) {
    //       this.flag = !this.flag
    //       const data = await delCollect(this.list.houseCode)
    //       console.log(data)
    //     } else {
    //       await updateCollect()
    //     }
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.theader {
  height: 252px;
}
.tbody {
  padding: 15px;
  .sub {
    color: #39becd;
    background: #e1f5f8;
    display: inline-block;
    font-size: 12px;
    border-radius: 3px;
    padding: 4px 5px;
    margin-right: 5px;
    line-height: 12px;
  }
  .price {
    display: flex;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    margin: 15px 0;
    padding: 15px 0;
    color: #fa5741;
    .left {
      flex: 1;
      text-align: center;
    }
    .middle {
      flex: 1;
      text-align: center;
    }
    .right {
      flex: 1;
      text-align: center;
    }
  }
  .erath {
    display: flex;
    font-size: 13px;
    .e_left {
      flex: 1;
    }
    .e_right {
      flex: 1;
    }
  }
}
.thigh {
  padding: 15px;
  .mname {
    margin: 0 3%;
    line-height: 44px;
    color: #666;
  }
  .map {
    height: 145px;
  }
  .match {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
}
.calf {
  padding: 15px;
  height: 266px;
  .calf_top {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
}
.tfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #cecece;
  text-align: center;
  font-size: 17px;
  color: #999;
  background-color: #fff;
  display: flex;
  overflow: hidden;
  .left {
    flex: 1;
    border-right: 1px solid #e8e8e9;
  }
  .midd {
    flex: 1;
  }
  .right {
    flex: 1;
    border-right: 1px solid #e8e8e9;
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
